<template>
  <div class="edge-table-div">
    <vxe-toolbar
      :id="toolbarId"
      size="mini"
      :custom="{storage: true, checkMethod: checkColumnMethod}"
    >
      <template v-slot:buttons>
        <!-- <span style="margin-left:5px;">搜索:&nbsp;</span> -->
        <vxe-input
          v-model="filterName"
          size="mini"
          type="search"
          placeholder="请输入..."
          style="margin-left:1px;width:200px;"
          @keyup.enter.native="onSearch"
          @suffix-click="onSearch"
        />
        <!-- <vxe-button
              size="mini"
              type="text"
              icon="fa fa-search"
              style="font-size:12px;margin-left:0;padding:0 2px"
              @click="onSearch"
        >搜索</vxe-button>-->
        <vxe-button
          size="mini"
          type="text"
          icon="fa fa-refresh"
          style="font-size:12px;margin-left:0;padding:0 2px"
          @click="onRefresh"
        >刷新</vxe-button>
        <!-- <vxe-button
          size="mini"
          type="text"
          icon="fa fa-upload"
          style="font-size:12px;margin-left:0;padding:0 2px"
          @click="onImport"
        >导入</vxe-button>-->
        <!-- <vxe-select size="mini" :transfer="true" placeholder="导出" prefix-icon="fa fa-download">
              <vxe-option value="1" label="导出选中"></vxe-option>
              <vxe-option value="2" label="导出全部"></vxe-option>
        </vxe-select>-->
        <vxe-button
          size="mini"
          type="text"
          icon="fa fa-download"
          style="font-size:12px;margin-left:0;padding:0 2px"
          @click="onExportSelected"
        >导出</vxe-button>
        <!-- <vxe-button
          size="mini"
          type="text"
          icon="fa fa-download"
          style="font-size:12px;margin-left:0;padding:0 2px"
          @click="onExportAll"
        >导出全部</vxe-button>-->
      </template>
    </vxe-toolbar>

    <vxe-table
      ref="xTable"
      highlight-current-row
      highlight-hover-row
      highlight-hover-column
      show-overflow
      auto-resize
      width="auto"
      export-config
      row-id="key"
      :loading="loading"
      :checkbox-config="{reserve: true}"
      :sort-config="{showIcon: false}"
      :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
      :size="options.size"
      :height="options.height"
      :resizable="options.resizable"
      :align="options.allAlign"
      :data="filterData"
      @header-cell-click="onHeaderCellClick"
      @cell-dblclick="onCellDoubleClick"
    >
      <vxe-table-column type="checkbox" width="30" />
      <vxe-table-column type="seq" width="30" />
      <template v-for="(column, columnIndex) in columns">
        <!-- 自定义my-column组件,接收参数更灵活 -->
        <my-column :key="columnIndex" :value="column" />
        <!-- <vxe-table-column
              :key="columnIndex"
              :field="column.field"
              :title="column.title"
              :sortable="column.sortable"
              :visible="column.visible"
              :formatter="column.formatter"
            >
              <template v-slot:header>
                <div style="line-height:20px;">{{ column.title }}</div>
                <div
                  v-if="column.unit"
                  v-katex="addBracketForKatex(column.unit)"
                  style="height:12px;line-height:12px;font-size:10px;"
                />
              </template>
        </vxe-table-column>-->
      </template>
    </vxe-table>
    <!-- 分页 -->
    <!-- <vxe-pager
      size="mini"
      align="right"
      :loading="loading"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.totalResult"
      @page-change="handlePageChange"
    />-->
  </div>
</template>

<script>
import VngUtil from '@/vng/util'
import XEUtils from 'xe-utils'
import MyColumn from './column'

// 参考: 使用vue-katex指令渲染公式
// https://developer.aliyun.com/mirror/npm/package/kim-vue-katex

export default {
  components: { MyColumn },
  props: {
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    columns: {
      type: Array,
      required: true,
      default: () => []
    },
    zoomTo: {
      type: Function,
      required: true
    },
    toolbarId: {
      type: String,
      required: false,
      default: 'vxe-toolbar-edge-table'
    }
  },
  data() {
    const that = this
    return {
      loading: false,
      // 哪些字段可以进行搜索
      seachableFields: [],
      // 完整的表格数据
      // tableData: [],
      // 全表搜索输入的内容
      filterName: '',
      // 过滤后得到的数据
      filterData: [],
      // 分页参数
      tablePage: {
        currentPage: 1,
        pageSize: 50,
        totalResult: 0
      },
      // 表格分页数据
      pageData: [],
      // 表格配置参数
      options: {
        // 表格尺寸
        size: 'mini',
        // 表格边框: inner-内边框
        border: 'inner',
        // 列宽可拖动
        resizable: true,
        // 表格固定高度
        // FIX 随意设置一个固定值即可,该值只是用来实现固定表头的
        //     通过css样式中修改为自适应高度,不会被固定表格高度!!!
        height: 428,
        // 对齐
        allAlign: 'center',
        // 表格无数据时显示的内容
        emptyText: '暂无数据'
      }
    }
  },
  created() {
    // this.test()
    // this.init()
    // 初始化可搜索字段名
    this.seachableFields = []
    const that = this
    this.columns.forEach(column => {
      if (column.sarchable) {
        that.seachableFields.push(column.field)
      }
    })
    // 初始化表格数据
    this.filterData = this.tableData
  },
  watch: {
    tableData(val) {
      this.filterData = this.filterList(val, this.filterName)
    }
  },
  methods: {
    // 使用测试数据
    // test() {
    //   // 使用测试数据
    //   this.tableData = TestData
    //   // this.updatePage(this.tableData)
    // },
    // 初始化,图形中查找所有的巷道并在表格中显示
    // init() {
    //   // 得到要提取的字段名
    //   const fields = []
    //   this.columns.forEach(item => {
    //     if (item.field === 'key') return
    //     fields.push(item.field)
    //   })
    //   // console.log(fields)
    //   const datas = []
    //   // 遍历巷道
    //   this.parts.forEach(part => {
    //     // ObjectId字段
    //     const data = { key: part }
    //     // Length字段
    //     // 读取始末点坐标,计算长度
    //     const { StartPoint, EndPoint } = VngUtil.Entity.getParam2(part, [
    //       'StartPoint',
    //       'EndPoint'
    //     ])
    //     data['length'] = VngUtil.Geo.Distance(StartPoint, EndPoint)
    //     // 其它字段
    //     // 读取附加的属性数据
    //     // const dao = OcxDao.Create(part, OcxDao.EXT)
    //     // fields.forEach(field => {
    //     //   if (field !== 'key') {
    //     //     data[field] = dao.get(field)
    //     //   }
    //     // })
    //     // // console.log(data)
    //     datas.push(data)
    //   })
    //   // console.log(datas)
    //   this.tableData = datas
    //   // this.updatePage(this.tableData)
    // },

    // 点击表头: 列排序
    onHeaderCellClick({
      column,
      triggerResizable,
      triggerSort,
      triggerFilter
    }) {
      // 如果触发了列的其他功能按钮
      if (
        column.sortable &&
        !(triggerResizable || triggerSort || triggerFilter)
      ) {
        if (column.order === 'desc') {
          this.$refs.xTable.clearSort()
        } else if (column.order === 'asc') {
          this.$refs.xTable.sort(column.property, 'desc')
        } else {
          this.$refs.xTable.sort(column.property, 'asc')
        }
      }
    },
    // 双击单元格: 自动缩放到巷道位置
    onCellDoubleClick({ row, rowIndex, column, columnIndex, $event }) {
      console.log(row, rowIndex, column, columnIndex, $event)
      // 通过key定位图形并居中
      this.zoomTo(row['key'])
    },
    // 表头单元格样式
    // headerCellClassName({ column, columnIndex }) {
    //   return 'custom-cell'
    //   // if (column.property === 'name') {
    //   //   return 'col-blue'
    //   // }
    // },
    // 表格单元格样式
    // cellClassName({ row, rowIndex, column, columnIndex }) {
    //   return 'custom-cell'
    //   // if (column.property === 'sex') {
    //   //   if (row.sex >= '1') {
    //   //     return 'col-red'
    //   //   } else if (row.age === 26) {
    //   //     return 'col-orange'
    //   //   }
    //   // }
    // },

    // 完整表格数据tableData过滤后的数据
    // TODO 目前是在浏览器端进行过滤,后期可考虑与服务端关联!
    filterList(tableData, filterName) {
      if (!tableData) return []
      // console.log('filter name:', filterName)
      const _filterName = XEUtils.toString(filterName)
        .trim()
        .toLowerCase()
      // 用户没有输入,或输入了空格
      if (_filterName === '') {
        return this.tableData
      }

      const that = this
      const rest = tableData.filter(item =>
        that.seachableFields.some(
          key =>
            XEUtils.toString(item[key])
              .toLowerCase()
              .indexOf(_filterName) > -1
        )
      )
      // console.log(rest)
      return rest
    },

    // 更新表格
    // 如果设置了分页,则进行数据分页
    // TODO 目前数据分页是在浏览器端模拟出来的,后期还需要与服务端关联起来!
    updatePage(data) {
      // console.log('updatePage', data)
      this.loading = true
      const that = this
      // 模拟异步操作获取分页数据
      return new Promise(resolve => {
        setTimeout(() => {
          // 计算分页数据在tableData数组中的索引范围
          let i = that.tablePage.currentPage - 1
          const j = that.tablePage.currentPage
          if (i < 0) i = 0
          const size = that.tablePage.pageSize
          // pageData -- 要显示的分页数据
          // totalResult -- 数据总个数
          if (i * size > data.length) {
            that.pageData = data
            that.tablePage.totalResult = data.length
          } else if (j * size > data.length) {
            that.pageData = data.slice(i * size, data.length)
            that.tablePage.totalResult = data.length
          } else {
            that.pageData = data.slice(i * size, j * size)
            that.tablePage.totalResult = data.length
          }
          this.loading = false
          resolve()
        }, 300)
      })
    },
    // 表格分页
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      // 处理过滤后的分页数据
      this.updatePage(this.filterData)
    },
    // 字段显示和隐藏
    checkColumnMethod({ column }) {
      // if (column.property === 'key') {
      //   return false
      // }
      return true
    },
    // 点击"搜索"按钮
    onSearch() {
      // tableData --> filterData --> pageData
      this.filterData = this.filterList(this.tableData, this.filterName)
      // this.updatePage(this.filterData)
    },
    // 点击"刷新"按钮
    onRefresh() {
      // this.filterName = ''
      this.$emit('refresh')
      // if (this.filterData && this.filterData.length === 0) {
      //   this.filterData = this.filterList(this.tableData, this.filterName)
      // }
      // this.updatePage(this.filterData)
    },
    // 点击"导入"按钮
    onImport() {},
    // 点击"导出"按钮
    onExportSelected() {
      this.$refs.xTable.exportData({
        data: this.$refs.xTable.getCheckboxRecords()
      })
    },
    onExportAll() {
      // TODO 由于采用了分页,vxe-table中的data属性关联是pageData(当前分页数据)
      // 表格里的数据只有分页数据,因此, 下面的2行代码均无效,导出的只是当前分页数据
      // this.$refs.xTable.exportData({ type:'csv' })
      // this.$refs.xTable.exportData({ data: this.tableData })
    }
  }
}
</script>

<style lang="scss">
.edge-table-div {
  // padding: 0px 2px;
  height: 100%;
  overflow: hidden;

  // 让vxe-table使用flex布局
  display: flex;
  flex-direction: column;

  // 让vxe-table使用flex布局
  // 固定表头的同时,还可以自动适应随高度
  .vxe-table {
    flex: 1;
    height: 100%;
    .vxe-table--main-wrapper {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .vxe-table--body-wrapper {
      flex: 1;
    }
  }

  .vxe-toolbar {
    font-size: 12px !important;
    height: 30px !important;

    .vxe-input {
      font-size: 12px;
      height: 24px !important;
      line-height: 24px !important;
    }

    .vxe-button.type--button {
      font-size: 12px !important;
      height: 24px !important;
    }

    .vxe-custom--option > .vxe-checkbox--icon {
      font-size: 12px !important;
    }

    .vxe-tools--operate-btn {
      font-size: 12px !important;
      padding: 9px 10px !important;
    }
  }

  .vxe-table .vxe-header--column {
    // padding: 3px 0;
    .vxe-resizable {
      // FIX 修复分割线不垂直居中的问题
      top: 0;
    }
    // .col--gutter {
    //   display: none !important;
    // }
  }

  // .vxe-table .vxe-table--body-wrapper {
  //   height: 100%;
  // }
  // 表格行高缩小
  .vxe-table.size--mini .vxe-body--column.col--ellipsis,
      // .vxe-table.size--mini .vxe-footer--column.col--ellipsis,
      // .vxe-table.size--mini .vxe-header--column.col--ellipsis,
      .vxe-table.vxe-editable.size--mini .vxe-body--column {
    height: 28px !important;
  }

  // 全局缩小单元格的padding
  .vxe-table .vxe-cell {
    padding: 0 5px !important;
  }

  // table里的checkbox字体大小
  .vxe-table.size--mini .vxe-cell--checkbox .vxe-checkbox--icon,
  .vxe-table.size--mini .vxe-cell--radio .vxe-radio--icon {
    font-size: 12px !important;
  }
  // .vxe-select--panel.animat--enter,
  // .vxe-select--panel.animat--leave {
  //   transform: none !important;
  // }

  // 设置pager的高度和字体大小
  .vxe-pager {
    font-size: 12px !important;
    height: 30px !important;
  }

  .vxe-pager .vxe-pager--jump .vxe-pager--goto,
  .vxe-pager .vxe-pager--sizes > .vxe-input {
    height: 2em !important;
    line-height: 2em !important;
  }

  .vxe-pager .vxe-pager--count,
  .vxe-pager .vxe-pager--jump-next,
  .vxe-pager .vxe-pager--jump-prev,
  .vxe-pager .vxe-pager--left-wrapper,
  .vxe-pager .vxe-pager--next-btn,
  .vxe-pager .vxe-pager--num-btn,
  .vxe-pager .vxe-pager--prev-btn,
  .vxe-pager .vxe-pager--right-wrapper {
    height: 2em !important;
    line-height: 1.65em !important;
  }

  .vxe-pager .vxe-pager--count,
  .vxe-pager .vxe-pager--jump-next,
  .vxe-pager .vxe-pager--jump-prev,
  .vxe-pager .vxe-pager--next-btn,
  .vxe-pager .vxe-pager--num-btn,
  .vxe-pager .vxe-pager--prev-btn {
    min-width: 1.5em !important;
  }

  .vxe-pager .vxe-pager--jump-next,
  .vxe-pager .vxe-pager--jump-prev,
  .vxe-pager .vxe-pager--next-btn,
  .vxe-pager .vxe-pager--num-btn,
  .vxe-pager .vxe-pager--prev-btn {
    margin: 0 0.15em !important;
  }
}
</style>
